<template>
  <div>
  <div class="box">
        <!--头部 -->
        <div class="top">
            <div class="zc">
            </div>
            <div class="ri">
                <a href="#" id="wenjvan"> <img src="../assets/问卷.jpg">登录页面，调查问卷</a>
            </div>
        </div>
        <!-- 安全 -->
        <div class="tip">
           <p> 依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证!新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
        </div>
        <!--  -->
        <div class="login">
            <div>
                <div class="lo_ri">
                    <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
                    <ul class="nav">
                        <li>扫码登录</li>
                        <li>账号登录</li>
                    </ul>
                    <ul class="dl">
                        <li class="ma">
                            <img src="../assets/show.png" alt="">
                        </li>
                        <li class="mi">
                            <el-form :model="ruleForm" 
                            status-icon 
                            :rules="rules" 
                            ref="ruleForm" 
                            label-width="100px" 
                            class="demo-ruleForm">
                                <el-form-item label="用户名" prop="usn">
                                    <el-input type="text"  class="inp" v-model="ruleForm.usn" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pwd">
                                    <el-input  class="inp" v-model.number="ruleForm.pwd"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="foot">
            <ul>
                <li><a href="javascript(0)">关于我们</a></li>
                <li><a href="javascript(0)">联系我们</a></li>
                <li><a href="javascript(0)">人才招聘</a></li>
                <li><a href="javascript(0)">商家入驻</a></li>
                <li><a href="javascript(0)">广告服务</a></li>
                <li><a href="javascript(0)">手机游戏</a></li>
                <li><a href="javascript(0)">友情链接</a></li>
                <li><a href="javascript(0)">销售联盟</a></li>
                <li><a href="javascript(0)">京东社区</a></li>
                <li><a href="javascript(0)">京东公益</a></li>
            </ul>
            <p>Copyright&copy;2004-2022 &nbsp;京东JD.com版权所有</p>
        </div>
    </div>
  </div>
</template>
<script>
import {loginAjax} from '../api/user'
  export default {
    data(){
        var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入密码'));
          } else {
              callback();
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } 
        else {
          callback();
        }
      };
      return {
        ruleForm: {
          usn: '',
          pwd: ''
        },
        rules: {
          usn: [
            { validator: validatePass, trigger: 'blur' }
          ],
          pwd: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
  // 登录 
    submitForm(ruleForm) {
        this.$refs[ruleForm].validate(async(valid) => {
          // 前端校验成功
          if (valid) {
            let res = await loginAjax({
              username:this.ruleForm.usn,
              password:this.ruleForm.pwd
            })
          if(res.data.meta.status==200){
            window.sessionStorage.setItem('token',res.data.data.token);
            this.ruleForm.usn=''
            this.ruleForm.pwd=''
            this.$router.push('/welcome')
          }else{
            return this.$message.error("用户名或密码错误")
          }
          // 前端校验失败
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

  }
</script>
<style lang='scss' scoped>
// 
#wenjvan{
    color: rgb(179,176,192);
    padding: 0 3px;
}
#wenjvan img{
    height: 12px;
    margin-right: 3px;
    display: inline-block;
    
}

.logo{
    height: 80px;
}
.logo a{
    height: 80px;
}
.zc{
    height: 65px;
}
.ri{
    height: 50px;
}
.ri a{
    border: 1px dotted rgb(179,176,192);
}

.tip{
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    background-color: rgb(255,248,240);
}
.tip p{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    text-indent:8em;
    color: rgb(179,176,192);
    font-size: 10px;
}
.login{
    height: 700px;
    width: 100%;
    background: url('../assets/bg_ddt.jpg') no-repeat;
    background-size:125% 130%;
    background-position: -100px 0px;
}
.login>div{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.lo_ri{
    height: 680px;
    width: 500px;
    position: absolute;
    background-color: white;
    top: 10px;
    right: 0;
}
.lo_ri p:nth-child(1){
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: rgb(179,176,192);
    background-color: rgb(255,248,240);
}
.lo_ri ul:nth-of-type(1){
    height: 80px;
    border-bottom: 1px solid rgb(179,176,192);

}
.lo_ri ul:nth-of-type(1) li{
    display: inline-block;
    width: 246px;
    text-align: center;
    font-size: 20px;
    color: rgb(128,128,128);
    height: 20px;
    line-height: 20px;
    margin-top: 30px;
    border-right: 2px solid rgb(203, 203, 203);
}
.lo_ri ul:nth-of-type(1) li:last-child{
    border: 0;
    color: rgb(84, 168, 253);
}
.dl{
    position: relative;
}
.ma{
    position: absolute;
    width: 500px;
    height: 520px;
    display: none;
}
.ma img{
    margin: 100px 160px;
    height: 200px;
}
.mi{
    position: absolute;
   width: 500px;
   height: 320px;
   padding-top: 100px;
}

.inp{
    margin-left: 13px;
    height: 48px;
    width: 240px;
    text-indent: 1em;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: .5px;
    color: rgb(67, 67, 67);
    border: 0;
    background-color: white;
}

button{
    width: 120px;
}

.foot{
    width: 1200px;
    height: 120px;
    padding-top: 30px;
    font-size: 2px;
    margin: 0 auto;
}
.foot a{
    color: rgb(90, 89, 89);
}
.foot ul{
    width: 900px;
    margin: 0 auto;
}
.foot li{
    display: inline-block;
    width: 80px;
    line-height: 10px;
    text-align: center;
    border-right: 1px solid rgb(90, 89, 89);
}
.foot li:last-child{
    border: 0;
}
.foot p{
    text-align: center;
    margin-top: 20px;
}
</style>